<template>
  <div class="app-container">
    <el-card :bordered="false">
      <el-form
        ref="formValidate"
        :rules="ruleValidate"
        :model="formValidate"
        label-width="130px"
      >
        <el-row :gutter="24">
          <!-- 商品信息-->
          <el-col v-bind="grid2">
            <el-form-item label="商品名称：" prop="store_name">
              <el-input
                v-model="formValidate.store_name"
                placeholder="请输入商品名称"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品分类：" prop="cate_id">
              <el-select
                v-model="formValidate.cate_id"
                filterable
                :filter-method="dataFilter"
                clearable
              >
                <el-option
                  v-for="item in optionsMetaShow"
                  :disabled="item.disabled === 0"
                  :value="item.value"
                  :key="item.id"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品关键字：" prop="">
              <el-input
                v-model="formValidate.keyword"
                placeholder="请输入商品关键字"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="单位：" prop="unit_name">
              <el-input
                v-model="formValidate.unit_name"
                placeholder="请输入单位"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="毛重：" prop="gross_weight">
              <el-input
                v-model="formValidate.gross_weight"
                placeholder="请输入毛重"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="毛单价：" prop="gross_price">
              <el-input
                v-model="formValidate.gross_price"
                placeholder="请输入毛单价"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="净重：" prop="net_weight">
              <el-input
                v-model="formValidate.net_weight"
                placeholder="请输入净重"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="净单价：" prop="net_price">
              <el-input
                v-model="formValidate.net_price"
                placeholder="请输入净单价"
                type="number"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="等级：" prop="level">
              <el-input v-model="formValidate.level" placeholder="请输入等级" />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="产地：" prop="place_of_origin">
              <el-input
                v-model="formValidate.place_of_origin"
                placeholder="请输入产地"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="货源：" prop="source_of_goods">
              <el-input
                v-model="formValidate.source_of_goods"
                placeholder="请输入货源"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="外包装：" prop="outer_packaging">
              <el-input
                v-model="formValidate.outer_packaging"
                placeholder="请输入外包装"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="包装层数：" prop="number_of_packaging_layers">
              <el-input
                v-model="formValidate.number_of_packaging_layers"
                placeholder="请输入包装层数"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="不良率：" prop="defect_rate">
              <el-input
                v-model="formValidate.defect_rate"
                placeholder="请输入不良率"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="保存条件：" prop="storage_conditions">
              <el-input
                v-model="formValidate.storage_conditions"
                placeholder="请输入保存条件"
              />
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="上架时间：">
              <el-time-picker
                v-model="down_time"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
                format="HH:mm:ss"
                placeholder="选择时间"
                @change="handleTimeChange"
                
              >
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="下架时间：">
              <el-time-picker
                v-model="up_time"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59',
                  format: 'HH:mm:ss'
                }"
                placeholder="选择时间"
                @change="upTimeChange"
              >
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid2">
            <el-form-item label="商品简介：" prop="">
              <el-input
                v-model="formValidate.store_info"
                type="textarea"
                :rows="3"
                placeholder="请输入商品简介"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品封面图：" prop="image">
              <single-pic
                v-model="formValidate.image"
                type="image"
                :num="1"
                :width="150"
                :height="150"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品轮播图：" prop="slider_image">
              <MaterialList
                v-model="formValidate.slider_image"
                type="image"
                :num="4"
                :width="150"
                :height="150"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品规格：" props="spec_type">
              <el-radio-group
                v-model="formValidate.spec_type"
                @change="changeSpec"
              >
                <el-radio :label="0" class="radio">单规格</el-radio>
                <el-radio :label="1"
                  >多规格{{ formValidate.spec_typ }}</el-radio
                >
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开启积分兑换：" props="is_integral">
              <el-radio-group
                v-model="formValidate.is_integral"
                @change="changeSpec"
              >
                <el-radio :label="0" class="radio">不开启</el-radio>
                <el-radio :label="1">开启</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- 多规格添加-->
          <el-col :span="24" v-if="formValidate.spec_type === 1" class="noForm">
            <el-col :span="24">
              <el-form-item label="选择规格：" prop="">
                <div class="acea-row row-middle">
                  <el-select
                    v-model="formValidate.selectRule"
                    style="width: 23%;"
                  >
                    <el-option
                      v-for="(item, index) in ruleList"
                      :value="item.ruleName"
                      :key="index"
                      >{{ item.ruleName }}</el-option
                    >
                  </el-select>
                  <el-button type="primary" class="mr20" @click="confirm"
                    >确认</el-button
                  >
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item v-if="attrs.length !== 0">
                <div v-for="(item, index) in attrs" :key="index">
                  <div class="acea-row row-middle">
                    <span class="mr5">{{ item.value }}</span>
                    <i
                      class="el-icon-circle-close"
                      @click="handleRemoveRole(index)"
                    ></i>
                  </div>
                  <div class="rulesBox">
                    <el-tag
                      type="dot"
                      closable
                      color="primary"
                      v-for="(j, indexn) in item.detail"
                      :key="indexn"
                      :name="j"
                      class="mr20"
                      @close="handleRemove2(item.detail, indexn)"
                      >{{ j }}</el-tag
                    >
                    <el-input
                      placeholder="请输入属性名称"
                      v-model="item.detail.attrsVal"
                      style="width: 150px"
                    >
                      <el-button
                        slot="append"
                        type="primary"
                        @click="createAttr(item.detail.attrsVal, index)"
                        >添加</el-button
                      >
                    </el-input>
                  </div>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="createBnt">
              <el-form-item>
                <el-button
                  type="primary"
                  icon="md-add"
                  @click="addBtn"
                  class="mr15"
                  >添加新规格</el-button
                >
                <el-button type="success" @click="generate">立即生成</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="showIput">
              <el-col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                <el-form-item label="规格：">
                  <el-input
                    placeholder="请输入规格"
                    v-model="formDynamic.attrsName"
                  />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="9" :md="10" :sm="24" :xs="24">
                <el-form-item label="规格值：">
                  <el-input
                    v-model="formDynamic.attrsVal"
                    placeholder="请输入规格值"
                  />
                </el-form-item>
              </el-col>
              <el-col :xl="6" :lg="5" :md="10" :sm="24" :xs="24">
                <el-button type="primary" @click="createAttrName"
                  >确定</el-button
                >
                <el-button type="danger" @click="offAttrName">取消</el-button>
              </el-col>
            </el-col>
            <!-- 多规格设置-->
            <el-col
              :xl="24"
              :lg="24"
              :md="24"
              :sm="24"
              :xs="24"
              v-if="
                manyFormValidate.length &&
                  formValidate.header.length !== 0 &&
                  attrs.length !== 0
              "
            >
              <!-- 多规格表格-->
              <el-col :span="24">
                <el-form-item label="商品属性：" class="labeltop">
                  <el-table
                    :data="manyFormValidate"
                    size="small"
                    style="width: 90%;"
                  >
                    <el-table-column
                      type="myindex"
                      v-for="(item, index) in formValidate.header"
                      :key="index"
                      :label="item.title"
                      :property="item.slot"
                      align="center"
                    >
                      <template slot-scope="scope">
                        <div
                          v-if="scope.column.property == 'pic'"
                          align="center"
                        >
                          <single-pic
                            v-model="scope.row[scope.column.property]"
                            type="image"
                            :num="1"
                            :width="60"
                            :height="60"
                          />
                        </div>
                        <div
                          v-else-if="
                            scope.column.property.indexOf('value') != -1
                          "
                          align="center"
                        >
                          {{ scope.row[scope.column.property] }}
                        </div>
                        <div
                          v-else-if="scope.column.property == 'action'"
                          align="center"
                        >
                          <a @click="delAttrTable(scope.$index)" align="center"
                            >删除</a
                          >
                        </div>
                        <div v-else align="center">
                          <el-input
                            v-model="scope.row[scope.column.property]"
                            align="center"
                          />
                        </div>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-form-item>
              </el-col>
            </el-col>
          </el-col>
          <!-- 单规格表格-->
          <el-col
            :xl="23"
            :lg="24"
            :md="24"
            :sm="24"
            :xs="24"
            v-if="formValidate.spec_type === 0"
          >
            <el-form-item>
              <el-table
                :data="oneFormValidate"
                size="small"
                style="width: 90%;"
              >
                <el-table-column prop="pic" label="图片" align="center">
                  <template slot-scope="scope">
                    <single-pic
                      v-model="scope.row.pic"
                      type="image"
                      :num="1"
                      :width="60"
                      :height="60"
                    />
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="售价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.price" />
                  </template>
                </el-table-column>
                <el-table-column prop="cost" label="成本价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.cost" />
                  </template>
                </el-table-column>
                <el-table-column prop="ot_price" label="原价" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.ot_price" />
                  </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" align="center">
                  <template slot-scope="scope">
                    <el-input
                      type="text"
                      v-model="scope.row.stock"
                      maxlength="7"
                    />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="bar_code"
                  label="商品编号"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.bar_code" />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="weight"
                  label="重量（KG）"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.weight" />
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="体积(m³)" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.volume" />
                  </template>
                </el-table-column>
                <el-table-column
                  prop="volume"
                  label="所需兑换积分"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.integral" />
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="运费模板：" prop="temp_id">
              <div class="acea-row">
                <el-select v-model="formValidate.temp_id" class="mr20">
                  <el-option
                    v-for="(item, index) in templateList"
                    :value="item.id"
                    :key="index"
                    :label="item.name"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="商品详情：">
              <ueditor-wrap
                v-model="formValidate.description"
                :config="myConfig"
                @beforeInit="addCustomDialog"
                style="width: 90%;"
              ></ueditor-wrap>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col v-bind="grid">
            <el-form-item label="虚拟销量：">
              <el-input-number
                :min="0"
                v-model="formValidate.ficti"
                placeholder="请输入虚拟销量"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col v-bind="grid">
            <el-form-item label="购买返回积分：">
              <el-input-number
                v-model="formValidate.give_integral"
                :min="0"
                placeholder="请输入积分"
              />
            </el-form-item>
          </el-col> -->
          <el-col v-bind="grid">
            <el-form-item label="排序：">
              <el-input-number
                :min="0"
                v-model="formValidate.sort"
                placeholder="请输入排序"
              />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <el-form-item label="佣金设置：">
              <el-radio-group v-model="formValidate.is_sub">
                <el-radio :label="1" class="radio">单独设置</el-radio>
                <el-radio :label="0">默认设置</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <el-col :span="24" v-if="formValidate.is_sub === 1">
            <!--单规格返佣-->
            <el-form-item
              label="商品属性："
              v-if="formValidate.spec_type === 0"
            >
              <el-table
                :data="oneFormValidate"
                size="small"
                style="width: 90%;"
              >
                <el-table-column prop="imageArr" label="图片" align="center">
                  <template slot-scope="scope">
                    <el-image :src="scope.row.pic" class="el-avatar">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="price" label="售价" align="center" />
                <el-table-column prop="cost" label="成本价" align="center" />
                <el-table-column prop="ot_price" label="原价" align="center" />
                <el-table-column prop="stock" label="库存" align="center" />
                <el-table-column
                  prop="bar_code"
                  label="商品编号"
                  align="center"
                />
                <el-table-column
                  prop="weight"
                  label="重量（KG）"
                  align="center"
                />
                <el-table-column prop="volume" label="体积(m³" align="center" />
                <el-table-column prop="volume" label="一级返佣" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.brokerage" />
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="二级返佣" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.brokerage_two" />
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
            <el-form-item
              label="商品属性："
              v-if="formValidate.spec_type === 1 && manyFormValidate.length"
            >
              <el-table
                :data="manyFormValidate"
                size="small"
                style="width: 90%;"
              >
                <el-table-column prop="imageArr" label="图片" align="center">
                  <template slot-scope="scope">
                    <el-image :src="scope.row.pic" :width="60" :height="60">
                      <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="sku" label="规格" align="center" />
                <el-table-column prop="price" label="售价" align="center" />
                <el-table-column prop="cost" label="成本价" align="center" />
                <el-table-column prop="ot_price" label="原价" align="center" />
                <el-table-column prop="stock" label="库存" align="center" />
                <el-table-column
                  prop="bar_code"
                  label="商品编号"
                  align="center"
                />
                <el-table-column
                  prop="weight"
                  label="重量（KG）"
                  align="center"
                />
                <!-- <el-table-column
                  prop="volume"
                  label="体积(m³)"
                  align="center"
                /> -->
                <!-- <el-table-column
                  prop="integral"
                  label="所需兑换积分"
                  align="center"
                /> -->
                <el-table-column prop="volume" label="一级返佣" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.brokerage" />
                  </template>
                </el-table-column>
                <el-table-column prop="volume" label="二级返佣" align="center">
                  <template slot-scope="scope">
                    <el-input type="text" v-model="scope.row.brokerage_two" />
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="商品状态：">
              <el-radio-group v-model="formValidate.is_show">
                <el-radio :label="1" class="radio">上架</el-radio>
                <el-radio :label="0">下架</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <!-- <el-col v-bind="grid">
            <el-form-item label="热卖单品：">
              <el-radio-group v-model="formValidate.is_hot">
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <!-- <el-col v-bind="grid">
            <el-form-item label="猜你喜欢：">
              <el-radio-group v-model="formValidate.is_benefit">
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <!-- <el-col v-bind="grid">
            <el-form-item label="精品推荐：">
              <el-radio-group v-model="formValidate.is_best">
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col v-bind="grid">
            <el-form-item label="首发新品：">
              <el-radio-group v-model="formValidate.is_new">
                <el-radio :label="1" class="radio">开启</el-radio>
                <el-radio :label="0">关闭</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-form-item>
          <el-button
            type="primary"
            class="submission"
            @click="handleSubmit('formValidate')"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCates } from "@/api/yxStoreCategory";
import { add, edit, getInfo, isFormatAttr } from "@/api/yxStoreProduct";
import editor from "../../components/Editor";
import picUpload from "@/components/pic-upload";
import mulpicUpload from "@/components/mul-pic-upload";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import MaterialList from "@/components/material";
import singlePic from "@/components/singlematerial";
import UeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    editor,
    picUpload,
    mulpicUpload,
    Treeselect,
    MaterialList,
    UeditorWrap,
    singlePic
  },
  data() {
    return {
      spinShow: false,
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24
      },
      grid3: {
        xl: 18,
        lg: 18,
        md: 20,
        sm: 24,
        xs: 24
      },
      // 批量设置表格data
      oneFormBatch: [
        {
          pic: "",
          price: 0,
          cost: 0,
          ot_price: 0,
          stock: 0,
          bar_code: "",
          seckill_stock: 0,
          seckill_price: 0,
          pink_stock: 0,
          pink_price: 0,
          weight: 0,
          volume: 0,
          integral: 0
        }
      ],
      // 规格数据
      formDynamic: {
        attrsName: "",
        attrsVal: ""
      },
      formDynamicNameData: [],
      isBtn: false,
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 500, // 初始容器高度
        initialFrameWidth: "100%", // 初始容器宽度
        UEDITOR_HOME_URL: "/UEditor/",
        serverUrl: ""
      },
      columns: [],
      formValidate: {
        gross_weight: "",
        gross_price: "",
        net_weight: "",
        net_price: "",
        level: "",
        place_of_origin: "",
        source_of_goods: "",
        outer_packaging: "",
        number_of_packaging_layers: "",
        storage_conditions: "",
        defect_rate: "",
        imageArr: [],
        sliderImageArr: [],
        store_name: "",
        cate_id: "",
        keyword: "",
        unit_name: "",
        store_info: "",
        image: "",
        slider_image: [],
        description: "",
        ficti: 0,
        give_integral: 0,
        sort: 0,
        is_show: 1,
        is_hot: 0,
        is_benefit: 0,
        is_best: 0,
        is_new: 0,
        is_good: 0,
        is_postage: 0,
        is_sub: 0,
        is_integral: 0,
        id: 0,
        spec_type: 0,
        temp_id: "",
        attrs: [],
        items: [
          {
            pic: "",
            price: 0,
            cost: 0,
            ot_price: 0,
            stock: 0,
            bar_code: "",
            integral: 0
          }
        ],
        header: [],
        selectRule: "",
        up_time: "",
        down_time: ""
      },
      down_time: '',
      up_time: '',
      ruleList: [],
      templateList: [],
      createBnt: false,
      showIput: false,
      manyFormValidate: [],
      // 单规格表格data
      oneFormValidate: [
        {
          imageArr: [],
          pic: "",
          price: 2,
          cost: 0,
          ot_price: 0,
          stock: 0,
          seckill_stock: 0,
          seckill_price: 0,
          pink_stock: 0,
          pink_price: 0,
          bar_code: "",
          weight: 0,
          volume: 0,
          brokerage: 0,
          brokerage_two: 0,
          integral: 0
        }
      ],
      images: [],
      grid: {
        xl: 8,
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24
      },
      loading: false,
      treeSelect: [],
      optionsMetaShow: [],
      tableIndex: 0,
      ruleValidate: {
        store_name: [
          { required: true, message: "请输入商品名称", trigger: "blur" }
        ],
        cate_id: [
          { required: true, message: "请选择商品分类", trigger: "change" }
        ],
        keyword: [
          { required: true, message: "请输入商品关键字", trigger: "blur" }
        ],
        unit_name: [{ required: true, message: "请输入单位", trigger: "blur" }],
        gross_weight: [
          { required: true, message: "请输入毛重", trigger: "blur" }
        ],
        gross_price: [
          { required: true, message: "请输入毛单价", trigger: "blur" }
        ],
        net_weight: [
          { required: true, message: "请输入净重", trigger: "blur" }
        ],
        net_price: [
          { required: true, message: "请输入净单价", trigger: "blur" }
        ],
        level: [{ required: true, message: "请输入等级", trigger: "blur" }],
        place_of_origin: [
          { required: true, message: "请输入产地", trigger: "blur" }
        ],
        source_of_goods: [
          { required: true, message: "请输入货源", trigger: "blur" }
        ],
        outer_packaging: [
          { required: true, message: "请输入外包装", trigger: "blur" }
        ],
        number_of_packaging_layers: [
          { required: true, message: "请输入包装层数", trigger: "blur" }
        ],
        storage_conditions: [
          { required: true, message: "请输入保存条件", trigger: "blur" }
        ],
        defect_rate: [
          { required: true, message: "请输入保存条件", trigger: "blur" }
        ],
        store_info: [
          { required: true, message: "请输入商品简介", trigger: "blur" }
        ],
        spec_type: [
          { required: true, message: "请选择商品规格", trigger: "change" }
        ],
        selectRule: [
          { required: true, message: "请选择商品规格属性", trigger: "change" }
        ],
        temp_id: [
          {
            required: true,
            message: "请选择运费模板",
            trigger: "change",
            type: "number"
          }
        ]
      },
      attrs: []
    };
  },
  watch: {
    "formValidate.image": function(val) {
      console.log("aaaa:" + val);
      if (val) {
        this.oneFormValidate[0].pic = val;
        console.log("bbbbbb:" + this.oneFormValidate.pic);
      }
    },
    "form.sliderImageArr": function(val) {
      if (val) {
        this.form.slider_image = val.join(",");
      }
    }
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    upTimeChange(value) {
      // 确保 value 是 'HH:mm:ss' 格式的字符串
      const hours = value.getHours().toString().padStart(2, '0');
      const minutes = value.getMinutes().toString().padStart(2, '0');
      const seconds = value.getSeconds().toString().padStart(2, '0');
      this.formValidate.up_time = `${hours}:${minutes}:${seconds}`;
      console.log(this.formValidate.up_time);
    },
    handleTimeChange(value) {
      // 确保 value 是 'HH:mm:ss' 格式的字符串
      const hours = value.getHours().toString().padStart(2, '0');
      const minutes = value.getMinutes().toString().padStart(2, '0');
      const seconds = value.getSeconds().toString().padStart(2, '0');
      this.formValidate.down_time = `${hours}:${minutes}:${seconds}`;
      console.log(this.formValidate.down_time);
    },
    dataFilter(val) {
      this.value = val;
      if (val) {
        this.optionsMetaShow = this.treeSelect.filter(item => {
          if (
            !!~item.label.indexOf(val) ||
            !!~item.label.toUpperCase().indexOf(val.toUpperCase())
          ) {
            return true;
          }
        });
      } else {
        this.optionsMetaShow = this.treeSelect;
      }
    },
    confirm() {
      let that = this;
      that.createBnt = true;
      if (that.formValidate.selectRule.trim().length <= 0) {
        return this.$message({
          message: "请选择属性",
          type: "error"
        });
      }
      that.ruleList.forEach(function(item, index) {
        if (item.ruleName === that.formValidate.selectRule) {
          that.attrs = item.ruleValue;
        }
      });
    },
    // 删除表格中的属性
    delAttrTable(index) {
      this.manyFormValidate.splice(index, 1);
    },

    // 添加按钮
    addBtn() {
      this.clearAttr();
      this.createBnt = false;
      this.showIput = true;
    },
    // 立即生成
    generate() {
      isFormatAttr(this.formValidate.id, { attrs: this.attrs })
        .then(res => {
          this.manyFormValidate = res.value;
          let headerdel = {
            title: "操作",
            slot: "action",
            fixed: "right",
            width: 220
          };
          res.header.push(headerdel);
          this.formValidate.header = res.header;
          //this.formValidate.attrs = res.attr;
          let header = res.header;
          header.pop();
          if (!this.$route.params.id && this.formValidate.spec_type === 1) {
            this.manyFormValidate.map(item => {
              item.pic = this.formValidate.image;
            });
            this.oneFormBatch[0].pic = this.formValidate.image;
          }
        })
        .catch(res => {
          // this.$message({
          //   message:res.msg,
          //   type: 'error'
          // });
        });
    },
    // 取消
    offAttrName() {
      this.showIput = false;
      this.createBnt = true;
    },
    clearAttr() {
      this.formDynamic.attrsName = "";
      this.formDynamic.attrsVal = "";
    },
    // 删除规格
    handleRemoveRole(index) {
      this.attrs.splice(index, 1);
      this.manyFormValidate.splice(index, 1);
    },
    // 删除属性
    handleRemove2(item, index) {
      item.splice(index, 1);
    },
    // 添加规则名称
    createAttrName() {
      if (this.formDynamic.attrsName && this.formDynamic.attrsVal) {
        let data = {
          value: this.formDynamic.attrsName,
          detail: [this.formDynamic.attrsVal]
        };
        this.attrs.push(data);
        var hash = {};
        this.attrs = this.attrs.reduce(function(item, next) {
          hash[next.value] ? "" : (hash[next.value] = true && item.push(next));
          return item;
        }, []);
        this.clearAttr();
        this.showIput = false;
        this.createBnt = true;
      } else {
        this.$message.warning("请添加完整的规格！");
      }
    },
    // 添加属性
    createAttr(num, idx) {
      if (num) {
        this.attrs[idx].detail.push(num);
        var hash = {};
        this.attrs[idx].detail = this.attrs[idx].detail.reduce(function(
          item,
          next
        ) {
          hash[next] ? "" : (hash[next] = true && item.push(next));
          return item;
        },
        []);
      } else {
        this.$message.warning("请添加属性！");
      }
    },

    // 改变规格
    changeSpec() {},
    // 详情
    getInfo() {
      let that = this;
      let id = that.$route.params.id || 0;
      getInfo(id)
        .then(async res => {
          let data = res.productInfo;
          console.log("data:" + data);
          if (data) {
            let cate_id = parseInt(data.cate_id) || 0;
            this.attrs = data.items || [];
            that.formValidate = data;
            that.formValidate.cate_id = cate_id;
            that.oneFormValidate = [data.attr];
            that.formValidate.header = [];
            that.generate();
            that.manyFormValidate = data.attrs;
            if (data.spec_type === 0) {
              that.manyFormValidate = [];
            } else {
              that.createBnt = true;
              that.oneFormValidate = [
                {
                  pic: "",
                  price: 0,
                  cost: 0,
                  ot_price: 0,
                  stock: 0,
                  seckill_stock: 0,
                  seckill_price: 0,
                  pink_stock: 0,
                  pink_price: 0,
                  bar_code: "",
                  weight: 0,
                  volume: 0,
                  brokerage: 0,
                  brokerage_two: 0,
                  integral: 0
                }
              ];
            }
          }

          that.treeSelect = res.cateList;
          that.ruleList = res.ruleList;
          that.templateList = res.tempList;
          that.optionsMetaShow = that.treeSelect;
        })
        .catch(res => {
          console.log("err:" + res);
          return this.$message({
            message: res.msg,
            type: "error"
          });
        });
    },

    // 提交
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          if (this.formValidate.spec_type === 0) {
            this.formValidate.attrs = this.oneFormValidate;
            this.formValidate.header = [];
            this.formValidate.items = [];
          } else {
            this.formValidate.items = this.attrs;
            this.formValidate.attrs = this.manyFormValidate;
          }
          if (
            this.formValidate.spec_type === 1 &&
            this.manyFormValidate.length === 0
          ) {
            return this.$message.warning("请点击生成规格！");
          }
          add(this.formValidate)
            .then(async res => {
              this.$message({
                message: "操作成功",
                type: "success"
              });
              setTimeout(() => {
                this.$router.push({ path: "/shop/goods" });
              }, 500);
            })
            .catch(res => {
              // this.$message({
              //   message:res.message,
              //   type: 'error'
              // });
            });
        } else {
          if (
            !this.formValidate.store_name ||
            !this.formValidate.cate_id ||
            !this.formValidate.keyword ||
            !this.formValidate.unit_name ||
            !this.formValidate.store_info ||
            !this.formValidate.image ||
            !this.formValidate.slider_image
          ) {
            this.$message.warning("请填写完整商品信息！");
          }
        }
      });
    },

    // 表单验证
    validate(prop, status, error) {
      if (status === false) {
        this.$message.warning(error);
      }
    },
    addCustomDialog() {
      window.UE.registerUI(
        "yshop",
        function(editor, uiName) {
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: "/yshop/materia/index",
            editor: editor,
            name: uiName,
            title: "上传图片",
            cssRules: "width:1200px;height:500px;padding:20px;"
          });
          this.dialog = dialog;

          var btn = new window.UE.ui.Button({
            name: "dialog-button",
            title: "上传图片",
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
            onclick: function() {
              dialog.render();
              dialog.open();
            }
          });

          return btn;
        },
        37
      );
    },

    cancel() {
      this.resetForm();
    }
  }
};
</script>

<style scoped lang="stylus">
.submission
  margin-left 10px;
.color-list .tip{
  color: #c9c9c9;
}
.color-list .color-item{
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color:#fff;
  margin-right :10px;
}
.color-list .color-item.blue{
  background-color: #1E9FFF;
}
.color-list .color-item.yellow{
  background-color: rgb(254, 185, 0);
}
.color-list .color-item.green{
  background-color: #009688;
}
.columnsBox
  margin-right 10px
.priceBox
  width 100%
.rulesBox
  display flex
  flex-wrap: wrap;
.curs
  cursor pointer
</style>
